<template>
  <div>
    <div class="zixun-concent">
      <div class="zixun-title">
        <div style="display: flex;justify-content:center;flex-direction:column;align-items:center;">
          <div style="font-weight: bold;font-size: 1.2rem;color: #333; width: 4.1875rem;" @click="getNews">推荐</div>
          <div class="xuanzhongdian"></div>
        </div>
        <van-field left-icon="search" v-model="value" placeholder="请输入关键词进行搜索"
          style="width:17.4375rem;border-radius:1.0625rem;background-color:#7B7D8014;height:1.875rem;line-height:0.875rem;"
          @click="getsearch()" />
      </div>
      <div class="zixun-nierong">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(item, index) in yinyuankang?.banners" :key="index" @click="gowebview(item.link)">
            <img :src="item.image" style="width: 100%;height:150px;object-fit: cover;border-radius:12px;z-index:-1;" />
          </van-swipe-item>
        </van-swipe>
        <div class="zixun-taps">
          <div v-for="(item, index) in zixunfenlei" :key="index" style="margin:1rem 1rem 0 0"
            @click="golist(item, index)" :class="{ active: indexType == index }">
            {{ item.name }}</div>
        </div>
        <div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in yinyuankang?.data" :key="index" @click="goitemlist(item.id)"
              class="vans-cell">
              <div class="zixun-cell">
                <div style="width:120px">
                  <img :src="item.image" alt="" style="width:7.5rem;height:3.875rem;border-radius:.5rem;object-fit: cover;">
                </div>

                <div style="margin-left:.75rem;flex:1">
                  <div style="display: flex;align-items: flex-start;">
                    <div style="width: 20px;height: 20px;flex-shrink: 0;" v-if="item.is_top == 1">
                      <img src="~/static/zixun/hot@2x.png" alt=""
                        style="width: 100%;height: 100%;object-fit: cover;flex-shrink: 0;">
                    </div>
                    <div class="truncate" style="margin-left: 3px;">
                      {{ item.title }}
                    </div>
                  </div>
                  <div
                    style="display: flex;align-items: center;justify-content: space-between;padding:0 5px 0 0;width:100%">
                    <div style="color: #AEB0B3;font-size: .5625rem;">{{ item.time_format }}</div>
                    <div style="display: flex;align-items: center;">
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic1.png" alt="" style="width:.75rem;height:.75rem">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .6875rem;">{{ item.look==0 ? '':item.look }}&nbsp;浏览</div>
                      </div>
                      <div style="margin:0, 0 .3135rem;font-weight: 500;color: #AEB0B3">·</div>
                      <div style="display: flex;align-items: center;">
                        <img src="~/static/zixun/basic2.png" alt="" style="width:.75rem;height:.75rem">
                        <div style="color: #AEB0B3;font-weight: 500;font-size: .6875rem;">{{ item.pinglun ==0 ? '':item.pinglun }}&nbsp;评论</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
    <BottomTab :types=1 />
  </div>
</template>

<script>
import BottomTab from '~/components/footer.vue';
export default {
  components: {
    BottomTab
  },
  head() {
    return {
      title: this.yinyuankang?.seos.title, // 动态标题
      meta: [
        { hid: 'description', name: 'description', content: this.yinyuankang?.seos.description }, // 描述
        { hid: 'keywords', name: 'keywords', content: this.yinyuankang?.seos.keywords } // 关键词
      ]
    }
  },
  computed: {
  },
  data() {
    return {
      value: '',
      page: 1,
      zixunfenlei: [],
      list: [],
      loading: false,
      finished: false,
      listid: '',
      indexType: 0,
      yinyuankang: '',
      docking: {
        '资讯新闻': 'zxxw',
        "新游测评": 'xycp',
        "福利活动": 'flhd',
        "游戏攻略": 'yxgl',
        "游戏设备": 'yxsb',
        "游戏视频": 'yxsp'
      }
    };
  },
  async asyncData({ $axios, req }) {
    if (process.server) {
      // 服务器端请求，不处理苹果设备
      const userAgent = req.headers['user-agent'];
      const isAppleDevice = /iPad|iPhone|iPod/.test(userAgent) && !/Android/.test(userAgent);

      if (isAppleDevice) {
        return {
          yinyuankang: null,
          zixunfenlei: null
        };
      }

      // 非苹果设备进行数据请求
      try {
        const params1 = { ct: 'news', class_id: 0 };
        const params2 = { ct: 'news', ac: 'classs' };
        const [response1, response2] = await Promise.all([
          $axios.get('api/app/v3', { params: params1 }),
          $axios.get('api/app/v3', { params: params2 }),
        ]);
        return {
          yinyuankang: response1.data,
          zixunfenlei: response2.data.data
        };
      } catch (error) {
        console.error('Failed to fetch data in asyncData:', error);
        return {
          yinyuankang: null,
          zixunfenlei: null
        };
      }
    } else {
      // 客户端逻辑，通常可以在 mounted 中处理数据请求
      return {
        yinyuankang: null,
        zixunfenlei: null
      };
    }
  },
  async mounted() {
    // 客户端请求
    const userAgent = navigator.userAgent;
    const isAppleDevice = /iPad|iPhone|iPod/.test(userAgent) && !/Android/.test(userAgent);
    try {
      const params1 = { ct: 'news', class_id: 0 };
      const params2 = { ct: 'news', ac: 'classs' };
      const [response1, response2] = await Promise.all([
        this.$axios.get('api/app/v3', { params: params1 }),
        this.$axios.get('api/app/v3', { params: params2 }),
      ]);
      this.yinyuankang = response1.data;
      this.zixunfenlei = response2.data.data;
    } catch (error) {
      console.error('Failed to fetch data in mounted:', error);
      this.yinyuankang = null;
      this.zixunfenlei = null;
    }
  },
  methods: {
    truncatedText(e) {
      const maxLength = 25; // Maximum number of characters
      return e.length > maxLength
        ? e.slice(0, maxLength) + '...'
        : e;
    },
    gowebview(e) {
      window.location.href = e;
    },
    goitemlist(e) {

      this.$router.push({
        path: `/news/${e}.html`,
      });
    },
    getsearch() {
      window.location.href = `${this.$domain}/m/index/search.php`;
    },
    async golist(e, a) {
      console.log(e, '哈哈哈')
      let tex = this.docking[e.name]
      this.page = 1
      this.indexType = a
      this.listid = e.id
      this.zhutilist(e.id)

    },
    onLoad() {

      setTimeout(() => {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
          this.zhutilist();
        }
      }, 500);
    },
    async zhutilist() {
      const params = {
        ct: 'news',
        class_id: this.listid,
        p: this.page
      };
      const response = await this.$axios.get('api/app/v3', { params });
      if (this.page == 1) {
        this.yinyuankang = response.data
      } else {
        this.yinyuankang.data = this.yinyuankang.data.concat(response.data.data);
      }

      this.loading = false;
    },
    async getNews() {
      const params2 = {
        ct: 'news',
        ac: 'classs'
      };
      try {

        const response = await this.$axios.get('api/app/v3', { params: params2 });
        this.zixunfenlei = response.data.data;
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  }
}
</script>
<style>
body {
  background: #F7F8FA !important;
  font-size: 16px;
  /* 默认字体大小 */
}</style>
<style scoped>

.zixun-concent {

}
/deep/ .van-cell::after {
  /* position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5); */
  border: none;
}
.zixun-title {
  display: flex;
  align-content: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #F7F8FA;
  z-index: 9999;
  padding: .75rem;
}

.xuanzhongdian {
  width: .375rem;
  height: .375rem;
  background: #ff7500;
  box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
  border-radius: 50%;
  margin-top: .125rem;
  margin-right: 1.9375rem;
  text-align: left;
  /* Simplify border-radius */
}

.zixun-nierong {
  margin: 0 12px;
}

.my-swipe .van-swipe-item {
  border-radius: .75rem;
}

/deep/.van-swipe__indicators {
  position: absolute;
  bottom: .75rem;
  left: 90%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/deep/.van-swipe__indicator {
  width: .375rem;
  height: .375rem;
  background-color: #ffffff;
  border-radius: 100%;
  -webkit-transition: opacity .2s, background-color .2s;
  -webkit-transition: opacity .2s, background-color .2s;
  transition: opacity .2s, background-color .2s;
}

.zixun-taps {
  display: flex;
  align-content: center;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

}

.zixun-taps>div {
  position: relative;
  padding-bottom: 0.5rem;
  /* Add space for the line */
}

.zixun-taps>div::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  /* Default state: no line */
  transition: background-color 0.3s;
}

.zixun-taps>div.active::after {
  background-color: #2E3033;
  /* Line color for the active state */
}

.zixun-taps::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}

.zixun-cell {
  display: flex;
  align-items: center;
}

.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: #47494D;
  font-size: .9375rem;
  overflow: hidden;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  max-height: 3em;
  text-align: left;
  font-weight: bold;
  text-overflow: ellipsis;
}

.hengxian {
  width: 3.5rem;
  height: .125rem;
  background: #2E3033;
  border-radius: 1.5625rem;
}

.active {
  font-weight: bold;
}

/deep/.vans-cell {
  background: none;
}
.van-cell {
    position: static;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding:8px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
}
/deep/.van-field__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
   margin-block-start: -2px
}
</style>
